<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<style type="text/css">
			html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,
			code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,
			form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,
			figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
				margin: 0;
				padding: 0;
				border: 0;
				outline: 0;
				font-size: 100%;
				vertical-align: baseline;
				background: transparent;
			}
			.main{
				display: flex;
				justify-content: space-around;
				align-items: center;
				flex-wrap: wrap;
			}
			  #box1 {
              height: 100px;
              width: 100px;
             background: green;
              transition: background 2s ease,transform 2s ease-in 1s;
          }
         #box1:hover{transform:rotate(180deg) scale(.5,.5);background:red;}
          #box2{
            height: 100px;
            width: 100px;
            background: blue;
        }
        #box2:hover{
            transform: rotate(180deg) scale(.5, .5);
            background: red;
            transition: background 2s ease, transform 2s ease-in 1s;}
            
              .box{
              	height:100px;
              	width:100px;
              	border:15px solid black;
            	animation: changebox 10s ease-in-out   3 alternate paused;
            }
        .box:hover{
            animation-play-state: running;
        }
        @keyframes changebox {
            10% {  background:red;  }
            50% {  width:80px;  }
            70% {  border:15px solid yellow;  }
            100% {  width:180px;  height:180px;  }
        }
        
     #spinner {
 
  z-index: 9999999;
  width: 200px;
  height: 200px;
  background-color: darkgoldenrod;
  
}
.div1{
	width: 100px;
	height: 100px;
	background-color: yellowgreen;
}
.b1{
	width: 100px;
}
		</style>
	</head>
	<body>
		<div class="main">
			
		
		<div id="box1">BOX1</div>
		
		 
 <div id="box2">BOX2</div>
 <div class="box"></div>
 
    <div id="spinner">
  <!--这里是动画内容-->
</div>
<div class="">
	

<button class="b1">开始</button>
<div class="div1">
	
</div>
</div>
</div>
<script src="../js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(document).ready(function(){
		
		var startTime = new Date().getTime();
		
		 // 2. 计算时间差
    var timeSpan = new Date().getTime() - startTime;
    
    // 3. 判断时差
    if(timeSpan >= 3000) {

        // 大于3秒结束动画

    } else {

        // 小于3秒用定时器延迟处理
        setTimeout(function(){
        	$(function() {
  $('#spinner').fadeOut();
})
            //...
        }, 3000 - timeSpan);

    }
    
  $(".b1").click(function(){
    $(".div1").animate({
      height:'toggle'
    });
  });
});
	
	


</script>
	</body>
</html>
